<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px;">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 用户列表卡片 -->
        <el-card >
            <el-form :inline="true" :model="userVO" class="demo-form-inline">
                <!-- 下拉框 -->
                <el-form-item label="部门" label-width="70px">
                <el-select v-model="userVO.departmentId" placeholder="请选择">
                    <el-option
                    v-for="item in departments"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">
                       <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.deptCount }}</span>
                    </span>
                    </el-option>
                </el-select>
                </el-form-item>
                <!-- 用户名 -->
                <el-form-item label="用户名" label-width="70px">
                    <el-input
                        placeholder="请输入用户名"
                        v-model="userVO.username"
                        clearable>
                    </el-input>
                </el-form-item>
                <!-- 邮箱地址 -->
                 <el-form-item label="邮箱" label-width="70px">
                    <el-input
                        placeholder="请输入邮箱地址"
                        v-model="userVO.email"
                        clearable>
                    </el-input>
                </el-form-item>
                <!-- 单选框 -->
                <el-form-item label="性别" label-width="70px">
                   <el-radio v-model="userVO.sex" label="0">男</el-radio>
                   <el-radio v-model="userVO.sex" label="1">女</el-radio>
                   <el-radio v-model="userVO.sex" label="">全部</el-radio>
                </el-form-item>
                <!-- 昵称 -->
                 <el-form-item label="昵称" label-width="70px">
                    <el-input
                        placeholder="请输入昵称"
                        v-model="userVO.nickname"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item style="margin-left: 50px;">
                    <el-button icon="el-icon-refresh" @click="resetUserVO">重置</el-button>
                    <el-button type="primary" icon="el-icon-search" @click="getUserList">查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="show">添加</el-button>
                    <el-button type="warning" icon="el-icon-download">导出</el-button>
                </el-form-item>
                
            </el-form>
            <!-- 表格 -->
              <el-table
                :data="userList "
                border
                max-height="400"
                style="width: 100%;">
                <el-table-column
                prop="id"
                label="序号"
                width="50">
                </el-table-column>
                <el-table-column
                prop="username"
                label="用户名"
                width="80">
                </el-table-column>
                <el-table-column
                prop="sex"
                label="性别"
                 width="50">
                 <template slot-scope="scope">
                   {{scope.row.sex==0?'男':(scope.row.sex==1?'女':'保密')}}
                 </template>
                </el-table-column>
                <el-table-column
                prop="name"
                label="所属部门"
                 width="90">
                </el-table-column>
                <el-table-column
                sortable
                prop="birth"
                label="生日"
                 width="150">
                </el-table-column>
                <el-table-column
                prop="email"
                label="邮箱"
                 width="150">
                </el-table-column>
                 <el-table-column
                prop="phoneNumber"
                label="电话"
                 width="120">
                </el-table-column>
                 <el-table-column
                prop="status"
                label="是否禁用"
                 width="80">              
                  <template slot-scope="scope">
                   <el-switch
                    v-model="scope.row.status"
                    active-color="#13ce66"
                    inactive-color="ff4949">
                   </el-switch>
                  </template>               
                </el-table-column>
                 <el-table-column             
                label="操作">
                <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
                <el-button type="warning" size="mini" icon="el-icon-s-tools"></el-button>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
             <el-pagination
                style="padding-top:10px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[6, 10, 20, 30]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
             </el-pagination>

             <UserAdd :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOrUpdate" ref="addOrUpdateRef"></UserAdd>
             
        </el-card>
    </div>
</template>

<script>

import { findUserList } from '../../api/users'
import { findDeptAndCount } from '../../api/dept'

import UserAdd from './UserAdd'



// // import UserAdd from './userAdd.vue'
// // import UserAdd from './userAdd.vue'
// import UserAdd from './userAdd.vue'
export default {
    name: "Users",
    data() {
      return {
         /*   input: '',
           formInline: {
          user: '',
          phone: '',
          city: '',
          radio: '',
        }, */
        userVO: {
          departmentId: '',
          username:'',
          email:'',
          sex:'0',
          nickname:'',
        },
        //用户集合
        userList: [],
        //部门集合
        deptList: [],
        //每页显示条数
        size: 6,
        //总条数
        total: 100,
        //当前页码
        current: 1,
      
        departments: [],
        value: '',
       addOrUpdateVisible:false,
      }
    },
    components :{
      UserAdd,
     
    },
    created() {
      //组件创建时调用的方法
      this.getUserList();
      this.getDeptAndCount();
    },
     methods: {
      onSubmit() {
        console.log('submit!');
      },
      //当每页条数发生改变时
       handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.size = val;
        //重新查询数据
        this.getUserList();
      },
      //当前页码改变时
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);
        this.current = val;
        this.getUserList(); 
      },
      async getUserList() {
        const {data} = await findUserList(this.current,this.size,this.userVO);
        //console.log(data.data.users);
        this.userList = data.data.users;
        this.total = data.data.total;
      },
      async getDeptAndCount() {
        const {data} = await findDeptAndCount();
        this.departments = data.data.departments;
        //console.log(data);
        // this.userList = data.data.users;
        // this.total = data.data.total;
      },
    //重置查询条件
    resetUserVO() {
      // this.userVO.departmentId = 1;
      // this.userVO.username = '';
      this.userVO = {
        departmentId: '',
          username:'',
          email:'',
          sex:'0',
          nickname:'',
      }
    },
    //按钮点击事件，显示新增编辑弹窗
    show(){
      this.addOrUpdateVisible = true
    },
    //监听子组件弹窗关闭后触发，
    showAddOrUpdate(data){
      if(data === 'false'){
        this.addOrUpdateVisible = false
      }else{
        this.addOrUpdateVisible = true
      }
    }
  }   
}
</script>

<style scoped>

</style>